<#import "themes/${theme}/macro/frontCurrentPosition.ftl" as frontCurrentPosition />
<#import "themes/${theme}/macro/frontPage.ftl" as frontPage />
<!DOCTYPE html>
<html>
    <head>
        <title>${getSite(siteId).name}-${curColumn.name}</title>

		<meta name="description" content="${curColumn.description}" />
		<meta name="keywords" content="${curColumn.keywords}" />
		<script type="text/javascript">
			function agree(id){
				if(null == id || "" == id){
				  	return false;
				}
				jpf.post("${ctxFrt}/guestbook/agree?id="+id,null,function(data){
					if(data.success){
                    	//jpf.success(data.msg);
                    	var agreeCount = parseInt(${"$"}("#agree_"+id+"").text());
                    	${"$"}("#agree_"+id+"").text(1+agreeCount);
                    	var evalu = parseInt(${"$"}("#evalu").text());
                    	${"$"}("#evalu").text(1+evalu);
                    }else{
        	  			jpf.error(data.msg);
                    }
				})
			}

			function oppose(id){
				if(null == id || "" == id){
				  	return false;
				}
				jpf.post("${ctxFrt}/guestbook/oppose?id="+id,null,function(data){
					if(data.success){
                    	//jpf.success(data.msg);
                    	var opposeCount = parseInt(${"$"}("#oppose_"+id+"").text());
                    	${"$"}("#oppose_"+id+"").text(1+opposeCount);
                    	var evalu = parseInt(${"$"}("#evalu").text());
                    	${"$"}("#evalu").text(1+evalu);
                    }else{
        	  			jpf.error(data.msg);
                    }
				})
			}

			function getIpAddress(){
				${"$"}('.address').each(function() {
					getSinaApi(${"$"}(this).attr('id'),${"$"}(this).attr('data-ip'));
				});
			}

			function getSinaApi(id,ip){
				var url = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip="+ip;
				${"$"}.getScript(url, function(_result){
					if(remote_ip_info.ret == '1'){
						${"$"}('#'+id).text(remote_ip_info.province + remote_ip_info.city);
		        	}
		        });
			}

			var validateForm;
			var columnAuditFlag = ${curColumn.auditFlag};
			function doSubmit(){
				if(validateForm.form()){
				  	jpf.loading();
				  	${"$"}("#inputForm").submit();
				  	return true;
				}
				return false;
			}

			${"$"}(document).ready(function() {
				validateForm = ${"$"}("#inputForm").validate({
					submitHandler: function(form){
						jpf.post("${ctxFrt}/guestbook/save",${"$"}('#inputForm').serialize(),function(data){
							if(data.success){
		                    	jpf.success(data.msg);
		                    	if(columnAuditFlag == 0){
		                    		window.location.href = "${ctxFrt}/${siteId}/col${preview}-${curColumn.id}${urlSuffix}";
		                    	}
		                    	var columnId = ${"$"}("#inputForm  input[name='column.id']").val();
		                    	var openFlag = ${"$"}("#inputForm  input[name='openFlag']").val();
		                    	${"$"}("#inputForm  input").val("");
		                    	${"$"}("#inputForm  textarea").val("");
		                    	${"$"}("#inputForm  input[name='column.id']").val(columnId);
		                    	${"$"}("#inputForm  input[name='openFlag']").val(openFlag);
		                    	${"$"}('.validateCode').attr('src','${pageContext.request.contextPath}/servlet/validateCodeServlet?'+new Date().getTime());
		                    }else{
	            	  			jpf.error(data.msg);
		                    }
						})
					},
					rules: {
						validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
					},
					messages: {
						validateCode: {remote: "验证码不正确！", required: "请填写验证码！"}
					},
					errorContainer: "#messageBox",
					errorPlacement: function(error, element) {
						${"$"}("#messageBox").text("输入有误，请先更正。");
						if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
							error.appendTo(element.parent().parent());
						} else {
							error.insertAfter(element);
						}
					}
				});

				//获取ip地址
				getIpAddress();
			})

		</script>
    </head>
    <body>
        <!-- 导航 -->
        <@frontCurrentPosition.content curColumn />

        <!-- 公共留言 -->
        <div class="guestbook-container">
        	<div class="container">
	            <div class="row">
	                <div class="col-sm-4 guestbook-form wow fadeInLeft">
	                    <p style="width:95%;">
							您对我们有什么咨询、建议、意见事宜请在此留言！<br>
							在此留言会在此栏目公开展示，请遵守国家网络发言评论相关规定！
	                    </p>
	                    <form:form id="inputForm" modelAttribute="inputGuestbook" action="#">
	                    	<sys:message content="${message}"/>
	                    	<input type="hidden" id="column.id" name="column.id" value="${curColumn.id}">
	                    	<input type="hidden" id="openFlag" name="openFlag" value="1">
	                    	<div class="form-group">
	                    		<label for="name">您的姓名</label>
	                        	<form:input path="name" placeholder="请输入您的姓名或昵称！" htmlEscape1="false" />
	                        </div>
	                        <div class="form-group">
	                        	<label for="title">留言标题</label>
	                        	<form:input path="title" placeholder="请输入您的留言主题！" htmlEscape="false"/>
	                        </div>
	                        <div class="form-group">
	                        	<label for="content"><font color="red">*</font> 留言内容</label>
	                        	<form:textarea path="content" placeholder="请描述您的留言内容！" class="required"
											htmlEscape="false" maxlength="1024"  minlength="2" />
	                        </div>
	                        <div class="form-group">
								<label for="validateCode"><font color="red">*</font> 验证码:</label>
								<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:5px;width:95%;"/>
							</div>
	                        <button type="button" class="btn" onclick="doSubmit()">提交</button>
	                    </form:form>
	                </div>
	                <div class="col-sm-8 guestbook-list wow fadeInUp">
	                	<div class="row" >
	                		<div class="col-sm-12 guestbook-top">
	                			<div class="guestbook-top-title">留言</div>
	                			<div class="guestbook-top-border">
	                				<span class="guestbook-top-count">
	                					<span class="guestbook-top-number">${page.count}</span>条留言，
	                					<span class="guestbook-top-number" id="evalu">${evaluGuestbook.agree + evaluGuestbook.oppose}</span>次评价
	                				</span>
	                			</div>
	                		</div>
	                	</div>
	                	<div class="row" >
	                		<div class="col-sm-12 guestbook-category">
	                			<ul><li>
                					<div class="guestbook-category-tag"></div>最新留言
	                			</li></ul>
	                		</div>
	                	</div>
	                	<div class="row" >
		            	<#list page.list as guestbook>
	            			<div class="col-sm-12 guestbook-box">
	            				<div class="guestbook-text wow fadeInLeft">
				                    <div class="guestbook-text-top">
				                    	<span class="guestbook-text-title">
				                    		${(guestbook.topWeight gt 0) ?then ('<span class="top-outline">置顶</span>','')}
				                    		${guestbook.title}
				                    	</span>
				                    	<span>
				                    		[
					                    	<span class="address" id="address_${guestbook.id}" data-ip="${guestbook.ip}">未知</span>
					                    	-${guestbook.name}]
				                    	</span>
				                    	<span class="guestbook-text-time">
				                    		<i class="fa fa-clock-o" title="留言时间"></i>
											${guestbook.createDate?string('yyyy-MM-dd HH:mm:ss')}
				                    	</span>
				                    </div>
				                    <div class="guestbook-text-content">${guestbook.content}</div>
				                    <#if guestbook.replyContent??>
				                    	<div class="guestbook-reply">
				                    		<span class="guestbook-reply-title">回复</span>
					                    	<span class="guestbook-reply-time">
					                    		<i class="fa fa-clock-o" title="回复时间"></i>
												${guestbook.replyDate?string('yyyy-MM-dd HH:mm:ss')}
					                    	</span>
					                    	<div class="guestbook-reply-content">
				                    			${guestbook.replyContent}
					                    	</div>
				                    	</div>
				                    </#if>
				                    <div class="guestbook-text-opinion">
				                    	<a onclick="agree(${guestbook.id})">
				                    		<i class="fa fa-thumbs-up"></i>
				                    		<span id="agree_${guestbook.id}">${guestbook.agree}</span>
				                    	</a>
				                    	<a onclick="oppose(${guestbook.id})">
				                    		<i class="fa fa-thumbs-o-down"></i>
				                    		<span id="oppose_${guestbook.id}">${guestbook.oppose}</span>
				                    	</a>
				                    </div>
				                </div>
			                </div>
						</#list>
			            </div>
			            <!-- 分页 -->
			            <div class="row" >
							<@frontPage.content page "${ctxFrt}/${siteId}/col${preview}-${curColumn.id}${urlSuffix}" />
						</div>
	                </div>
	            </div>
	        </div>
        </div>


    </body>
</html>
